<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @cell-click="handleCell"
               :cell-class-name="addClass">
   
    <template slot-scope="scope" slot="menu">
        <el-button type="text"
                   size="small"
                   plain
                   class="none-border"
                   @click.stop="handleImage(scope.row,scope.index)">流程图
        </el-button>
        <el-button type="text"
                   size="small"
                   plain
                   class="none-border"
                   @click.stop="handleDeal(scope.row,scope.index)">办理
        </el-button>
      </template>
    </avue-crud>
    <el-dialog title="流程图"
               append-to-body
               :visible.sync="flowBox"
               :fullscreen="true">
      <iframe
        :src=flowUrl
        width="100%"
        height="700"
        title="流程图"
        frameBorder="no"
        border="0"
        marginWidth="0"
        marginHeight="0"
        scrolling="no"
        allowTransparency="yes">
      </iframe>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="flowBox = false">关 闭</el-button>
      </span>
    </el-dialog>
     <el-dialog title="详情"
               append-to-body
               :visible.sync="dealBox"
               width="80%" >
               <el-container>
                <el-main style="overflow: hidden;" >
                    <avue-form :option="option" :rules="rules" v-model="form" @submit="handleSave" >
                    </avue-form>
                </el-main>
                <el-aside width="35%"  >
                  <el-card >
                       <div class="calendar-info">
                        <el-card shadow="hover">
                            <div slot="header">
                              <span>流程信息</span>
                            </div>
                            <el-row type="flex" class="row-bg">
                              <el-timeline>
                               
                                <el-timeline-item :key="flow.id" :timestamp="flow.assigneeName" v-for="flow in flowList" placement="top">
                                  <el-card shadow="hover">
                                    <p>在 [{{flow.handlingTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
                                    <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
                                  </el-card>
                                </el-timeline-item>
                              </el-timeline>
                            </el-row>
                          </el-card>
                          <el-card shadow="hover">
                            <div slot="header">
                              <span>流程跟踪</span>
                            </div>
                            <el-row type="flex" class="row-bg">
                              <img :src="src" alt="design" width="100%">
                            </el-row>
                           
                          </el-card>
                       </div>
                    </el-card>
                </el-aside>
                 
                </el-container>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getList, getDetail,disputeFlowList,dealSave} from "@/api/xapply/appeal/myCommissionAppeal";
  import {mapGetters} from "vuex";
  import {getNextTaskCondition} from "@/api/work/process";

  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        dealBox: false,
        flowBox: false,
        flowUrl: '',
        src: '',
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        flowList: [],
        option: {
           indexLabel:'序号',
          height: 'auto',
          calcHeight: 30,
          dialogWidth: 1150,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          addBtn: false,
          editBtn: false,
          delBtn: false,
          selection: false,
          excelBtn: false,
          emptyBtn: false,
          cancelBtn: true,
          dialogClickModal: false,
          column: [
            // {
            //   label: "主键ID",
            //   prop: "id",
            //   type: "input",
            //   addDisplay: false,
            //   editDisplay: false,
            //   viewDisplay: false,
            //   hide: true,
            // },
            {
              label: "所属网格",
              prop: "gridId",
              type: "tree",
              disabled: true,
              span: 24,
              //multiple: true,
              parent: true,
              display: true,
              search: true,
              dicMethod: "get",
              dicUrl: "/api/smart-system/dept/treeByPid",
              props: {
                label: "title"
              
              },
              rules: [{
                required: true,
                message: "请输入所属网格",
                trigger: "blur"
              }],
            },
            {
              label: "诉求名称",
              prop: "name",
              type: "input",
              disabled: true,
              span: 24,
              search: true,
              rules: [{
                required: true,
                message: "请输入诉求名称",
                trigger: "blur"
              }],
            },
            {
              label: "发生时间",
              prop: "happenTime",
              type: "date",
              disabled: true,
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              span: 24,
              rules: [{
                required: true,
                message: "请输入发生时间",
                trigger: "blur"
              }],
            },
            {
              label: "发生地点",
              prop: "happenAddress",
              type: "input",
               disabled: true,
              span: 24,
              search: true,
              rules: [{
                required: true,
                message: "请输入发生地点",
                trigger: "blur"
              }],
            },
            {
              label: "诉求内容",
              prop: "content",
              type: "textarea",
              disabled: true,
              overHidden: true,
              span: 24,
              rules: [{
                required: true,
                message: "请输入诉求内容",
                trigger: "blur"
              }],
            },
             {
              label: "处理",
              prop: "handleType",
              type: "select",
              dicData:[],
               props: {
                label: "title",
                value: "key"
              },
             rules: [{
                required: true,
                message: "请选择办理方式",
                trigger: "blur"
              }],
            hide: true,
            },
            {
              label: "处理意见",
              prop: "handlingSuggestion",
              type: "textarea",
              span: 24,
              hide: true,
            },
            {
              type: "daterange",
              label: "发生时间",
              span: 8,
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              prop: "happenTimeRange",
              searchRange:true,
              display: false,
              hide: true,
              search: true,
            },
          ]
        },
        data: [],
       
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
       //查看流程图
      handleImage(row) {
          this.flowUrl = `/api/smart-flow/process/diagram-view?processInstanceId=${row.flowId}`;
          this.flowBox = true;
      },
       //查看
         handleDeal(row) {
           //流程图
              this.src = `/api/smart-flow/process/diagram-view?processInstanceId=${row.flowId}`;
            //流程信息--这是用的自己的流程
            disputeFlowList(row.id).then(res=>{
            const data = res.data;
              if (data.success) {
                this.flowList = data.data;
              }
            })
             getDetail(row.id).then(res => {
                this.form = res.data.data;
                this.dealBox = true;
             });
               getNextTaskCondition(row.taskId).then(res=>{
                //处理字段
                const handleType = this.findObject(this.option.column ,"handleType");
                handleType.dicData =res.data.data;
              })
           
      },
       //处理保存
      handleSave(row,loading){
        console.log("11");
        loading();
          dealSave(row).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "保存成功!"
            });
            //done();
            this.dealBox = false;
            this.onLoad(this.page);
          }, error => {
            loading();
            window.console.log(error);
          });
      },
      //颜色
      // addClass({columnIndex}){
      //           if(columnIndex === 3 ){
      //             return 'cell-blue'
      //           }
      //       },
      beforeOpen(done) {

        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
         const {happenTimeRange} = params;
        let values = {
          ...params,
        };
        if (happenTimeRange) {
          values = {
            ...params,
            beginTime: happenTimeRange[0],
            endTime: happenTimeRange[1],
          };
          values.happenTimeRange = null;
          this.query.happenTimeRange = null;
        }
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style>
  .cell-blue{
        color: blue!important;
        cursor: pointer;
    }
</style>
